<section>
  <header><h3>基本样式</h3></header>
  <article>
    <div class="example">
      <span class="label">标签</span>
      <span class="label label-primary">Tag</span>
    </div>
    <pre><code></code>&lt;span class=&quot;label&quot;&gt;标签&lt;/span&gt;</pre>
  </article>
</section>

<section>
  <header>
    <h3>标签和徽标的颜色</h3>
  </header>
  <article>
    <div class="example">
      <span class="label">Default</span>
      <span class="label label-primary">Primary</span>
      <span class="label label-success">Success</span>
      <span class="label label-info">Info</span>
      <span class="label label-warning">Warning</span>
      <span class="label label-danger">Danger</span>
    </div>
    <pre><code></code>&lt;span class=&quot;label&quot;&gt;Default&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-success&quot;&gt;Success&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-info&quot;&gt;Info&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-danger&quot;&gt;Danger&lt;/span&gt;</pre>
  </article>
</section>

<section>
  <header><h3>徽标</h3></header>
  <article>
    <p><code>.label-badge</code></p>
    <div class="example">
      <span class="label label-badge">12</span> <span class=
      "label label-badge label-primary">Primary</span> <span class=
      "label label-badge label-success">Success</span> <span class=
      "label label-badge label-info">Info</span> <span class=
      "label label-badge label-warning">Warning</span> <span class=
      "label label-badge label-danger">Danger</span>
    </div>
    <pre><code></code>&lt;span class=&quot;label label-badge&quot;&gt;Default&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-badge label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-badge label-success&quot;&gt;Success&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-badge label-info&quot;&gt;Info&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-badge label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-badge label-danger&quot;&gt;Danger&lt;/span&gt;</pre>

    <h4>小圆点徽标</h4>
    <div class="example">
      <span class="label label-dot">12</span> <span class=
      "label label-dot label-info">Primary</span> <span class=
      "label label-dot label-info">Success</span> <span class=
      "label label-dot label-info">Info</span> <span class=
      "label label-dot label-warning">Warning</span> <span class=
      "label label-dot label-danger">Danger</span>
    </div>
    <pre><code></code>&lt;span class=&quot;label label-dot&quot;&gt;Default&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-dot label-primary&quot;&gt;Primary&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-dot label-success&quot;&gt;Success&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-dot label-info&quot;&gt;Info&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-dot label-warning&quot;&gt;Warning&lt;/span&gt;</pre>
    <pre><code></code>&lt;span class=&quot;label label-dot label-danger&quot;&gt;Danger&lt;/span&gt;</pre>

    <h4>按钮中的徽标</h4>
    <div class="example">
      <button class="btn">我的消息 <span class="label label-badge">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-primary">12</span></button> <button class="btn">处理错误
      <span class="label label-badge label-success">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-info">12</span></button> <button class="btn">处理错误
      <span class="label label-badge label-warning">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-badge label-danger">12</span></button>
      <br>
      <br>
      <button class="btn btn-primary">联系人 <span class=
      "label label-badge">12</span></button> <button class="btn btn-success">联系人
      <span class="label label-badge">12</span></button> <button class=
      "btn btn-info">联系人 <span class="label label-badge">12</span></button>
      <button class="btn btn-warning">联系人 <span class=
      "label label-badge">12</span></button> <button class="btn btn-danger">联系人
      <span class="label label-badge">12</span></button>
      <br>
      <br>
      <button class="btn">列表 <span class="label label-dot">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-dot label-primary">12</span></button> <button class="btn">处理错误
      <span class="label label-dot label-success">12</span></button> <button class=
      "btn">处理错误 <span class="label label-dot label-info">12</span></button>
      <button class="btn">处理错误 <span class=
      "label label-dot label-warning">12</span></button> <button class="btn">处理错误
      <span class="label label-dot label-danger">12</span></button>
      <br>
      <br>
      <button class="btn btn-primary">联系人 <span class=
      "label label-dot">12</span></button> <button class="btn btn-success">联系人
      <span class="label label-dot">12</span></button> <button class=
      "btn btn-info">联系人 <span class="label label-dot">12</span></button>
      <button class="btn btn-warning">联系人 <span class=
      "label label-dot">12</span></button> <button class="btn btn-danger">联系人
      <span class="label label-dot">12</span></button>
    </div>
    <pre><code>&lt;button class=&quot;btn&quot;&gt;列表 &lt;span class=&quot;label label-badge&quot;&gt;12&lt;/span&gt;&lt;/button&gt;</code></pre>

    <h4>列表组中的徽标和标签</h4>
    <div class="example">
      <div class="list-group">
        <a href="#" class="list-group-item">Project <span class="label label-success">New</span></a>
        <a href="#" class="list-group-item">todo</a>
        <a href="#" class="list-group-item">story<span class="label label-badge label-primary">3 stories</span></a>
        <a href="#" class="list-group-item">task<span class="label label-info label-badge pull-right">10 tasks</span></a>
        <a href="#" class="list-group-item">bug <span class="label label-badge label-warning">2 bugs</span></a>
        <a href="#" class="list-group-item">case <span class="label label-badge label-danger pull-right">100+</span></a>
      </div>
    </div>
    <pre><code>&lt;div class=&quot;list-group&quot;&gt;
  &lt;a href=&quot;#&quot; class=&quot;list-group-item&quot;&gt;Project &lt;span class=&quot;label label-success&quot;&gt;New&lt;/span&gt;&lt;/a&gt;
  ...</code></pre>
  </article>
</section>
